<template>
    <div class="login">
        <div class="form">
            <h3>登录！</h3>
            <div>
            <el-input v-model="num" placeholder="请输入手机号"></el-input>
        </div>
        <div>
            <el-input v-model="code" placeholder="请输入验证码"></el-input>
            <el-button type="primary" plain>获取验证码</el-button>
        </div>
        <el-button class="login" @click="login" type="primary" round>登录</el-button>
        </div>
        
    </div>
</template>

<script>
import { loginTest } from '@/assets/api';
import { mapMutations, } from 'vuex';
import WebIM from 'easemob-websdk';
const appKey = "1101230218170423#zhiyebang";
// 初始化客户端。
WebIM.conn = new WebIM.connection({
    appKey: appKey,
})
export default{
    data(){
        return{
            num:'',
            code:''
        }
    },
    methods:{
        ...mapMutations(['setToken']),
        login(){
            const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            if(!this.num){
                this.$message.error('请输入手机号');
            }else if(!this.code){
                this.$message.error('请输入验证码');
            }else{
                if(!reg.test(this.num)||this.code!='1234'){
                    this.$message.error('请输入正确的手机号或验证码');
                }else{
                    loginTest(this.num,this.code).then(res=>{
                        sessionStorage.setItem('token',res.data.data.token)
                        this.$store.commit('setToken',{
                            token:res.data.data.token,
                        })
                        this.$store.commit('setMine',res.data.data.userInfo)
                        // 注册IM
                        WebIM.conn.registerUser({ username:this.num, password:this.code })
                        .then((res) => {
                            console.log(res);
                        })
                        .catch((e) => {
                            console.log(e);
                        });
                        this.$router.go(-1);
                    })
                }
            }
            
        }
    }
}
</script>


<style lang="scss" scoped>
.login{
    display: flex;
    justify-content: center;
    .form{
        margin-top: 100px;
        width: 80%;
        div{
            margin: 10px 0;
        }
        .login{
            margin-top: 50px;
            width: 100%;
        }
    }
}
</style>
